<template>
  <div id="home">
    <div style="width: 15%; height: 100%;background-color:#2A7BFF">
      <div style="width: 100%; height: 10%;display: flex;justify-content: space-around;align-items: center;">
        <el-image style="border-radius: 50%;margin-left: 10px;height: 60%; width:45px;"></el-image>
        <span style="margin: 10px 10px; color:#FFF; font-weight: 700;">九尾医疗服务后台</span>
      </div>
      <el-menu
      router
      style="background-color: #2A7BFF;color: #FFF;border-right: 0px;"
        @select="menuSelectItem"
        unique-opened
        default-active="1"
        collapse-transition
        text-color="#FFF"
        active-text-color="#FFF"
        active-background-color="#FFF"
        class="el-menu-vertical-demo"
      >

        <template v-for="item in menuLs">
          <el-sub-menu class="menu" v-if="item['children']" :index="item['url']">
          <template #title>
            <span style="font-weight: 600">{{ item['title'] }}</span>
          </template>
            <el-menu-item  v-for="ite in item['children']" :index="ite['url']" style="font-weight: 600">{{ ite['title']}}</el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="item['url']" style="font-weight: 600">
          {{ item['title']}}
        </el-menu-item>
        </template>
      </el-menu>
    </div>
    <div style="width: 80%; height: 100%;">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import request from '@/utils/request';
import { onMounted,ref } from 'vue'
const menuLs = ref([]) 
const getData = async() => {
  let res = await request.get('getmenus')
  menuLs.value = res.ls
}
onMounted(() => {
  getData()
})
const menuSelectItem = (val:string) => {
  console.log(val)
}
</script>

<style>

.el-menu {
    background-color: var(--el-menu-bg-color);
    border-right: 0px solid var(--el-menu-border-color);
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding-left: 0;
    position: relative;
}
.el-menu-item.is-active{
  background-color:#006EFF !important;
}
.el-menu-item.is-active {
    background-color:#006EFF;
}
.el-menu-hover-bg-color{
  background-color:#006eff;
}
.el-menu-item{
  background-color: #2A7BFF;
}
#home{
  height: 100%;
  width:100%;
  display: flex;
}
</style>